<template>
	<view class="container">
		<!-- 标题 -->
		<headTitle title="商城" :index="true" :indexMsg="true" :self="true" @back="back"></headTitle>

		<view class="carousel-section">
			<swiper class="carousel" circular indicator-dots indicator-color="#ffffff"
				indicator-active-color="#C84739" autoplay interval="3000">
				<swiper-item v-for="item in carouselList" :key="item.id" class="carousel-item" @tap="navToDetailPage(item.url)">
					<image :src="item.pic" mode="aspectFill"/>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 平台承诺 -->
		<view class="index-promise bgfff flex-center-around">
			<view v-for="item in promiseList" :key="item.id">
				<image :src="item.icon" mode=""></image>
				<text class="font22">{{item.title}}</text>
			</view>
		</view>
		
		<!-- 分类+专题轮播+标题 -->
		<view class="index-content">
			<image class="index-content-image" src="/static/image/indexbg.png" mode=""></image>
			<view class="index-content-border">
				<!-- 分类 -->
				<view class="index-type flex-center-center">
					<view v-for="item in typeList" :key="item.catId" class="flex-column-between" 
						@tap="navToTabPage('/pages/category/category?type=' + item.catId)">
						<image :src="item.icon" mode=""></image>
						<text class="font28 color333">{{item.name}}</text>
					</view>
					<view class="flex-column-between" v-if="result.isDisplayAllCat"
						@tap="navToTabPage('/pages/category/category')">
						<image src="/static/image/indextype.png" mode=""></image>
						<text class="font28 color333">分类</text>
					</view>
				</view>
				<!-- 专题轮播 -->
				<view class="tui-banner-box">
					<swiper class="tui-banner-swiper" circular
					 previous-margin="113rpx" next-margin="113rpx" @change="change">
						<swiper-item v-for="(item,index) in subjectList" :key="index" class="tui-banner-item"
							@tap="navToTabPage('/pages/subject/subject?num=' + item.id)">
							<image :src="item.image" class="tui-slide-image" 
							:class="[current!=index?'tui-banner-scale':'']" mode="aspectFill" />
							<view class="tui-slide-view"
								:class="[current!=index?'tui-banner-scale':'']" mode="center">
								<view>
									<text class="font30 fontb">{{item.name}}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 标题 -->
				<view class="index-guess">
					<text class="font28 color666">猜你喜欢</text>
				</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="guess-section flex-wrap">
			<shop v-for="(item, index) in newProductList" :key="index" :item="item"></shop>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<indexFooter :active='1'/>
	</view>
</template>

<script>
import Api from '@/common/api'
import shop from '@/components/shop.vue'
import headTitle from '@/components/head-title.vue'
import indexFooter from "@/components/footer/footer.vue"
import uniLoadMore from '@/components/uni-load-more/uni-load-more'
export default {
	//加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getNewProductList()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.pageNum = 1
		this.getNewProductList('refresh')
		this.getBanner()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 2000);
	},
	onLoad() {
		this.getBanner()
		this.getNewProductList('refresh')
	},
	data() {
		return {
			pageNum: 1,
			loadingType: 'more', //加载更多状态
			carouselList: [], // 第一个轮播图数据
			promiseList: [], // 平台承诺数据
			typeList: [], // 分类数据
			subjectList: [], // 专题轮播图
			newProductList: [], // 猜你喜欢的数据
			result: {}, // 所有数据
			current: 0, // 专题轮播图当前索引
		}
	},
	methods: {
		// 返回到app
		back() {
			window.location.href = 'http://classic.wljiam.com/personal'
		},
		// 专题轮播图
		change(e) {
			this.current = e.detail.current
		},
		
		/**
		 * 获取页面的数据（除了猜你喜欢）
		 */
		async getBanner(){
			let res = await Api.apiCall('get', Api.index.allData, {})
			if (res) {
				this.result = res
				this.carouselList = res.advertiseList || []
				this.promiseList = res.platformCommitmentList || []
				this.typeList = res.productCategoryList || []
				this.subjectList = res.subjectList || []
			}
		},
		
		/**
		 * 轮播图的跳转
		 */
		navToDetailPage(url) {
			return
			window.location.href =url;
		},
		
		/**
		 * 获取新品上市信息
		 */
		async getNewProductList(type = 'add'){
		    // 没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'more'
			}
			let list = await Api.apiCall('get', Api.index.guesslike, { 
				pageIndex: this.pageNum,
				pageSize: 10,
			})
			if(!list) return
			let goodsList = list.recordList
			if (type === 'refresh') {
				this.newProductList = []
			}
			this.newProductList = this.newProductList.concat(goodsList)
			// 判断是否有下一页数据
			this.loadingType = list.hasMore == 0 ? 'nomore' : 'more'
			if (type === 'refresh') {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			}
		},
		// 页面跳转
		navToTabPage(url) {
			uni.navigateTo({ url })
		},
	},
	components: {
		headTitle,
		shop,
		uniLoadMore,
		indexFooter,
	},
}
</script>

<style lang="scss">
page {
	padding-bottom: 88rpx;
	background: #f5f5f5;
}

/* 头部 轮播图 */
.carousel {
	width: 100%;
	height: 400upx;
	image {
		width: 100%;
		height: 100%;
	}
}

/* 平台承诺 */
.index-promise {
	width: 100%;
	height: 73rpx;
	view {
		image {
			vertical-align: middle;
			width: 26rpx;
			height: 26rpx;
			margin-right: 8rpx;
		}
		text {
			letter-spacing: 0.5rpx;
			color: #AD9D8E;
		}
	}
}

/* 分类+专题轮播+标题 */
.index-content {
	width: 100%;
	height: 912rpx;
	position: relative;
	&-image {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 628rpx;
	}
	
	.index-content-border {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		/* 分类 */
		.index-type {
			width: 100%;
			height: 223rpx;
			view {
				flex: 1;
				align-items: center;
				image {
					width: 64rpx;
					height: 64rpx;
					margin-bottom: 17rpx;
				}
			}
		}
		
		/* 专题轮播图 */
		.tui-banner-box {
			width: 100%;
			height: 560rpx;
			.tui-banner-swiper {
				width: 100%;
				height: 560rpx;
				.tui-banner-item {
					position: relative;
					box-sizing: border-box;
					.tui-slide-image {
						width: 100%;
						height: 100%;
						display: block;
						border-radius: 8rpx;
					}
					.tui-slide-view {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 100%;
						view {
							overflow: hidden;	
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 90rpx;
							padding: 0 30rpx;
							line-height: 90rpx;
							border-bottom-left-radius: 8rpx;
							border-bottom-right-radius: 8rpx;
							background-color: rgba(255, 255, 255, 0.8);
							text {
								letter-spacing: 1.5rpx;
							}
						}
					}
					.tui-banner-scale {
						transform: scale(0.9);
						transform-origin: top center;
					}
				}
			}
		}
		
		/* 标题 */
		.index-guess {
			width: 100%;
			height: 131rpx;
			line-height: 131rpx;
			text-align: center;
			text {
				position: relative;
				letter-spacing: 1rpx;
				&::after,
				&::before {
					content: '';
					display: inline-block;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: 166rpx;
					height: 1rpx;
					background-color: #c6c6c6;
				}
				&::before {
					left: calc(100% + 30rpx);
				}
				&::after {
					right: calc(100% + 30rpx);
				}
			}
		}
	}
}

/* 猜你喜欢 */
.guess-section {
	padding: 0 30rpx;
	.uni-load-more {
		width: 100%;
		line-height: 80rpx;
		text-align: center;
	}
}
</style>
